<script setup>
import { onMounted } from "vue";
import { RouterLink } from "vue-router";

// 定义 props
// 更好的做法：添加类型验证和默认值
const props = defineProps({
  pileImages: {
    type: Array,
    default: () => [], // 默认值为空数组
    validator: (value) => {
      // 可选：添加额外的验证逻辑
      return Array.isArray(value);
    }
  },pileNumber:String
});

// 解构 props 以提高模板中的可读性
const { pileImages } = props;

const showall = () => {
  console.log("图片展示：",props.pileImages.values());
};
onMounted(() => showall());


</script>

<template>
  <p>{{pileImages.length}}+{{pileNumber}} </p>
  <ul>
    <li v-for="(item,index) in pileImages" :key="index">
      <RouterLink to="/" class="pileImage">
        <!-- 这里假设使用 v-lazy 指令实现图片懒加载 -->

        <!-- http://192.168.1.245:9000/fileservice/2-1/1%20(2).png   -->
<!--        <img
            v-img-lazy="`http://192.168.1.245:9000/fileservice/${encodeURIComponent(item.filePath)}`"
            alt="桩基图片"
        >-->
        <img
            :src="`http://192.168.1.245:9000/fileservice/${encodeURIComponent(item.filePath)}`"
            alt="桩基图片"
        >



        <p class="pileNumber">{{ item.filePath }}</p>
        <p class="pileNumber">{{ item.pileNumber }}</p>
        <p class="operation">{{ item.operation }}</p>
      </RouterLink>
    </li>
  </ul>

</template>

<style scoped lang="scss">
.pileImage {
  display: block;
  width: 100%;
  padding: 20px 30px;
  text-align: center;
  transition: all 0.5s;
  height: 100%;

  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  img {
    width: 80%;
    height: 80%;
  }

  p {
    padding-top: 10px;
  }

  .pileNumber {
    font-size: 1.2rem;
  }

  .operation {
    color: orange;
    height: 29px;
  }

  .time {
    color: orange;
    font-size: 1.2rem;
  }
}
</style>